<template>
  <div id="allMessage">
    <el-button style="margin-left: 20px" type="primary" @click="changAll">全部设为已读</el-button>
    <div v-for="(item,index) in form.slice((currentPage-1)*size,currentPage*size)" :key="index" class="message">
      <div class="titleNot" :class="{titleYes : item.news_read === 1}">
        <el-badge is-dot v-show="item.news_read === 0"></el-badge>
        <span>{{item.news_time}}</span>
        <span>订单号:{{item.or_id}}</span>
        <span>采买方:{{item.ber_id}}</span>

        <el-link :underline="false"
                 @click="messageDetail(item)"
                 style="position: absolute;right: 60px"
                 type="primary">查看</el-link>
        <el-link :underline="false"
                 @click="responseMessage(item)"
                 style="position: absolute;right: 20px"
                 type="primary">回复</el-link>
      </div>
      <el-dialog title="具体消息"
                 @close="changeMessage"
                 :visible.sync="detail"
                 append-to-body
                 width="30%">
        <el-form>
            <el-form-item v-if="nowMessage.news_type === 1">
              <el-input type="textarea" v-model="nowMessage.news_content">
              </el-input>
            </el-form-item>
          <el-form-item v-else>
            <a class='download' :href='nowMessage.news_content' download="" title="下载">
              下载资料
            </a>
          </el-form-item>
        </el-form>
      </el-dialog>

      <el-dialog title="发消息"
                 :visible.sync="sendMessage"
                 append-to-body
                 width="60%"
      >
        <send-message :message-form="messageForm"
                      :path="path"
                      @cancelSend="sendMessage = false"/>
      </el-dialog>
    </div>
    <el-pagination
            style="margin-left: 20px"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15]"
            :page-size= 'size'
            layout="total, sizes, prev, pager, next, jumper"
            :total="form.length">
    </el-pagination>
  </div>
</template>

<script>
  import axios from "axios";
  import mixin from "../../../mixin/server";
  import SendMessage from "../../../components/content/SendMessage";

  export default {
    name: "message",
    inject:['reload'],
    mixins:[mixin],
    components:{
      SendMessage
    },
    mounted() {
      let url = 'https://haotry.top/api/serviceSide/getAllNews'
      axios.post(url, JSON.stringify({ser_id : this.$store.getters.getInfo.ser_id}), {
        headers: {
          'Content-Type': 'application/json'
        }
      }).then(res => {
        let data = res.data
        console.log(data)
        if(data.status === 200){
          this.form = data.data
        }
        else{
          alert('获取信息失败')
        }
      })
    },
    data(){
      return {
        path : '/server/message',
        form : [],
        detail : false,
        nowMessage : '',
        currentPage: 1,
        size: 5,
        sendMessage:false,
        messageForm:{
          or_id : '',
          ber_id : '',
          ser_id : '',
          news_type : 1,
          news_content : ''
        }
      }
    },
    methods:{
      messageDetail(item){
        this.detail = true
        this.nowMessage = item
    },
      changeMessage(){
        let url = 'https://haotry.top/api/serviceSide/makeOneNoticeRead'
        axios.post(url, JSON.stringify({news_id : this.nowMessage.news_id}), {
          headers: {
            'Content-Type': 'application/json'
          }
        }).then(res => {
          let data = res.data
          this.$store.dispatch('getMessageLength')
          this.reload()
        })
      },
      changAll(){
        let url = 'https://haotry.top/api/serviceSide/makeAllNoticeRead'
        console.log(this.nowMessage.ser_id)
        axios.post(url, JSON.stringify({ser_id : this.$store.getters.getInfo.ser_id}), {
          headers: {
            'Content-Type': 'application/json'
          }
        }).then(res => {
          console.log(res)
          this.$store.dispatch('getMessageLength')
          this.reload()
        })
      },
      responseMessage(item){
        this.messageForm.or_id = item.or_id
        this.messageForm.ber_id = item.ber_id
        this.messageForm.ser_id = item.ser_id
        console.log('......')
        console.log(this.messageForm)
        this.sendMessage = true
      }
    }
  }
</script>

<style scoped>
  #allMessage{
    text-align: left;
  }
  .message{
    margin: 20px;
    padding: 10px;
    width: 700px;
    border-bottom: 2px solid #156595;
    background-color: #fff;
    position: relative;
  }
  .titleNot span{
    margin: 10px 50px;
    color: #333;
  }
  .titleYes span{
    color: #999;
    margin: 10px 50px;
  }
</style>